<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>MeetSmart - 统计报表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" th:href="@{/css/style.css}">

    <!-- 引入必要的JS库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>

    <!-- 引入自定义JS -->
    <script th:src="@{/js/app.js}"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- 导航栏代码与dashboard.html相同 -->
</nav>

<div class="container mt-4">
    <h2><i class="bi bi-graph-up"></i> 统计报表</h2>

    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5><i class="bi bi-building"></i> 会议室使用率</h5>
                </div>
                <div class="card-body">
                    <form th:action="@{/reports/room-utilization}" method="get" class="row g-3">
                        <div class="col-md-6">
                            <label for="startDate" class="form-label">开始日期</label>
                            <input type="date" id="startDate" name="startDate" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label for="endDate" class="form-label">结束日期</label>
                            <input type="date" id="endDate" name="endDate" class="form-control" required>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary"><i class="bi bi-file-earmark-bar-graph"></i> 生成报表</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5><i class="bi bi-person"></i> 用户预约统计</h5>
                </div>
                <div class="card-body">
                    <form th:action="@{/reports/user-bookings}" method="get" class="row g-3">
                        <div class="col-md-6">
                            <label for="userId" class="form-label">用户</label>
                            <select id="userId" name="userId" class="form-select" required>
                                <option th:each="user : ${users}" th:value="${user.id}" th:text="${user.username}"></option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="userEndDate" class="form-label">结束日期</label>
                            <input type="date" id="userEndDate" name="endDate" class="form-control" required>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary"><i class="bi bi-file-earmark-bar-graph"></i> 生成报表</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-primary text-white">
            <h5><i class="bi bi-calendar"></i> 近期预约统计</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <canvas id="bookingStatusChart" width="400" height="300"></canvas>
                </div>
                <div class="col-md-6">
                    <canvas id="roomUsageChart" width="400" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 预约状态统计图表
    const statusCtx = document.getElementById('bookingStatusChart').getContext('2d');
    const statusChart = new Chart(statusCtx, {
        type: 'pie',
        data: {
            labels: ['待审核', '已批准', '已拒绝', '已取消', '已完成'],
            datasets: [{
                data: [12, 19, 3, 5, 8],
                backgroundColor: [
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(108, 117, 125, 0.7)',
                    'rgba(54, 162, 235, 0.7)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: '预约状态分布'
                }
            }
        }
    });

    // 会议室使用统计图表
    const roomCtx = document.getElementById('roomUsageChart').getContext('2d');
    const roomChart = new Chart(roomCtx, {
        type: 'bar',
        data: {
            labels: ['会议室A', '会议室B', '会议室C', '会议室D', '会议室E'],
            datasets: [{
                label: '使用次数',
                data: [12, 19, 3, 5, 8],
                backgroundColor: 'rgba(54, 162, 235, 0.7)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: '会议室使用频率'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
</body>
</html>